<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/bearing.css">
    <link rel="stylesheet" href="css/life.css">
    <script src="js/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="bearingPage" class="appPage">
        <header>
            <div class="projectName">汽车轴承剩余寿命预测平台</div>
            <div class="routeList">
                <a href="index.jsp">首页</a>
                <a href="bearing.jsp">轴承</a>
                <a href="./life.html">寿命监测</a>
                <a href="order.html">订单管理</a>
                <a href="aboutUs.html">关于我们</a>
            </div>
            <div class="adminInfo">
                <el-tooltip content="数据可视化" placement="top">
                    <a href="车辆综合管控平台/index.html"><i class="el-icon-data-line"></i></a>
                </el-tooltip>
                <div class="avatar">
                    <!-- <img src="" alt=""> -->
                    <i class="el-icon-user-solid"></i>
                </div>
            </div>
        </header>
        <main>
            <div class="bearingInfo">
                <table border="0">
                    <thead>
                        <tr>
                            <th>
                                轴承类型
                            </th>
                            <th>
                                轴承型号
                            </th>
                            <th>
                                检测时长
                            </th>
                            <th>
                                操作
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in tableData">
                            <td>{{item.type}}</td>
                            <td>{{item.id}}</td>
                            <td>{{item.duration}}</td>
                            <td>
                                <span class="buildBtn" @click="createImg(item)">生成</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <el-dialog title="振频生成图" :visible.sync="centerDialogVisible" center>
                <el-table :data="currentData">
                    <el-table-column property="imgSrc1" label="时频图">
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 100px" :src="scope.row.imgSrc1"
                                :preview-src-list="[scope.row.imgSrc1]">
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column property="imgSrc" label="振频图">
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 100px" :src="scope.row.imgSrc"
                                :preview-src-list="[scope.row.imgSrc]">
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column property="life" label="预测寿命"></el-table-column>
                </el-table>
            </el-dialog>
        </main>
    </div>
    <script>
        new Vue({
            el: '#bearingPage',
            data() {
                return {
                    centerDialogVisible: false,
                    tableData: [
                        {
                            type: '滚针轴承',
                            id: 'PNA15/32',
                            duration: "5min",
                            imgSrc: '../assets/img/lifeImg/life-1.png',
                            imgSrc1:'../assets/img/lifeImg/1680.png',
                            life: "8年"
                        },
                        {
                            type: '单列圆锥滚子轴承',
                            id: '33028',
                            duration: "5min",
                            imgSrc: '../assets/img/lifeImg/1680.png',
                            life: 5
                        },
                        {
                            type: '交叉滚子轴承',
                            id: 'RB7013',
                            duration: "5min",
                            imgSrc: '../assets/img/lifeImg/life-1.png',
                            life: 5
                        },
                        {
                            type: '调心球轴承',
                            id: '1212K',
                            duration: "5min",
                            imgSrc: '../assets/img/lifeImg/life-1.png',
                            life: 5
                        },
                        {
                            type: '角接触球轴承',
                            id: 'H719',
                            duration: "5min",
                            imgSrc: '../assets/img/lifeImg/life-1.png',
                            life: 5
                        },
                        {
                            type: '深沟球轴承',
                            id: 'MR137',
                            duration: "5min",
                            imgSrc: '../assets/img/lifeImg/life-1.png',
                            life: 5
                        },
                        {
                            type: '滑动轴承',
                            id: 'SKF51100',
                            duration: "5min",
                            imgSrc: '../assets/img/lifeImg/life-1.png',
                            life: 5
                        },
                        {
                            type: '水润滑轴承',
                            id: 'KF61130',
                            duration: "5min",
                            imgSrc: '../assets/img/lifeImg/life-1.png',
                            life: 5
                        },
                        {
                            type: '滚筒轴承',
                            id: 'NU51123',
                            duration: "5min",
                            imgSrc: '../assets/img/lifeImg/life-1.png',
                            life: 5
                        },
                        {
                            type: '圆柱滚子轴承',
                            id: 'NF2310',
                            duration: "5min",
                            imgSrc: '../assets/img/lifeImg/life-1.png',
                            life: 5
                        }
                    ],
                    currentData: []
                }
            },
            methods: {
                createImg(item) {
                    this.centerDialogVisible = true;
                    this.currentData = [item];
                    console.log(this.currentData);
                }
            }
        })
    </script>
</body>

</html>